{% extends 'admin/base.html' %}
{% load static %}

{% block title %}管理员仪表盘{% endblock %}

{% block content %}
<!-- 额外添加顶部间距，避免base.html中的元素遮挡 -->
<div style="height: 35px;"></div>
<div class="row">
    <div class="col-md-12 mb-4">
        <h2 class="td_fs_36 td_medium">管理员仪表盘</h2>
    </div>
</div>

<div class="row td_gap_y_30">
    <!-- Recent Announcements Section -->
    <div class="col-12">
        <div class="card td_radius_10 td_gray_bg_5">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0 td_fs_24 td_medium">最新公告</h4>
                <div>
                    <a href="{% url 'create_announcement' %}" class="td_btn td_style_1 td_radius_10 td_medium me-2">
                        <span class="td_btn_in td_white_color td_accent_bg">
                            <i class="fas fa-plus me-2"></i><span>创建公告</span>
                        </span>
                    </a>
                    <a href="{% url 'admin_announcements' %}" class="td_btn td_style_1 td_type_3 td_radius_10 td_medium">
                        <span class="td_btn_in td_accent_color">
                            <i class="fas fa-list me-2"></i><span>查看全部</span>
                        </span>
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if announcements %}
                    <div class="table-container">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>标题</th>
                                    <th>内容</th>
                                    <th>作者</th>
                                    <th>日期</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for announcement in announcements %}
                                <tr>
                                    <td>{{ announcement.title }}</td>
                                    <td>{{ announcement.content|truncatewords:30 }}</td>
                                    <td>{{ announcement.author.username }}</td>
                                    <td>{{ announcement.publish_date|date:"Y年m月d日" }}</td>
                                    <td>
                                        <a href="{% url 'edit_announcement' announcement.announcement_id %}" class="td_btn td_style_1 td_type_3 td_radius_10 td_medium btn-sm">
                                            <span class="td_btn_in td_accent_color">
                                                <i class="fas fa-edit me-1"></i><span>编辑</span>
                                            </span>
                                        </a>
                                        <button class="td_btn td_style_1 td_radius_10 td_medium btn-sm delete-announcement" 
                                                data-announcement-id="{{ announcement.announcement_id }}"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#deleteModal">
                                            <span class="td_btn_in td_white_color td_error_bg">
                                                <i class="fas fa-trash me-1"></i><span>删除</span>
                                            </span>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-center text-muted td_fs_18">暂无公告</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content td_radius_10">
            <div class="modal-header">
                <h5 class="modal-title td_fs_24 td_medium">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <p class="td_fs_18">确定要删除这条公告吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="td_btn td_style_1 td_type_3 td_radius_10 td_medium" data-bs-dismiss="modal">
                    <span class="td_btn_in td_accent_color">
                        <span>取消</span>
                    </span>
                </button>
                <form id="deleteForm" method="POST">
                    {% csrf_token %}
                    <button type="submit" class="td_btn td_style_1 td_radius_10 td_medium">
                        <span class="td_btn_in td_white_color td_error_bg">
                            <span>删除</span>
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('.delete-announcement').click(function() {
        const announcementId = $(this).data('announcement-id');
        $('#deleteForm').attr('action', `/accounts/admin/announcement/${announcementId}/delete/`);
    });
});
</script>
{% endblock %} 